<div id="ps0">
	<div class="personcenterPage clearfix">
	{include file="public/left" /}
	<!-- start -->
		<div class="view-content" id="app1">
			<div class="layui-tab layui-tab-brief " lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title ">
					<li class="layui-this">{{chapter_name}}</li>
					<input type="hidden" v-model="chapterId">
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<table class="layui-table" lay-skin="line" >
						  <colgroup>
						    <col width="80">
						    <col width="320">
						    <col width="180">
						    <col width="100">
						    <col width="90">
						    <col>
						  </colgroup>
						  <thead>
						    <tr>
						      <th>排序</th>
						      <th>题目</th>
						      <th style="text-align:center;">是否免费</th>
						      <th>课件</th>
						      <th>视频</th>
						      <th>操作</th>
						    </tr> 					
						  </thead>
						  <tbody>
							<template  v-for="(item,index) in periodList">
								<tr  v-if="Object.keys(item).length" :key="index">
									<td><input type="text" class="form-control" v-model="item.sort"></td>
									<td><input type="text" class="form-control" v-model="item.period_name"></td>
									<td style="color:red;text-align:center;">
										<input type="radio" :name="item.id+'s'" v-model.number="item.is_free" value="0">付费
										<input type="radio" :name="item.id+'s'" v-model.number="item.is_free" value="1">免费
									</td>
									<td>
										<input type="hidden" v-model="item.doc_url">
										<input type="hidden" v-model="item.is_doc">
										<input type="hidden" v-model="item.doc_name">
										<button type="button" class="layui-btn layui-btn-primary layui-btn-sm editfile " :id=`editfile${index}` v-if="item.doc_name" style="width:130px;overflow:hidden;">
										<i class="layui-icon">&#xe621;</i>{{item.doc_name}}
										</button>
										<button type="button" class="layui-btn layui-btn-primary layui-btn-sm editfile " :id=`editfile${index}`  v-else>
										<i class="layui-icon">&#xe621;</i>上传文件
										</button>
									</td>
									<td>
										<input type="text" v-model="item.video_vid">
									</td>
									<td>
										<div class="layui-btn-container">
										<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"  @click="editPeriod(item);">
											<i class="layui-icon">&#xe642;</i>修改
										</button>
										<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" @click="delPeriod(item.id)" >
											<i class="layui-icon ">&#xe640;</i>
											删除
										</button>
										</div>
									</td>
								</tr>
								<tr  v-else>
									<td><input type="text" class="form-control" v-model="periodInfo.sort"></td>
									<td><input type="text" class="form-control" v-model="periodInfo.period_name"></td>
									<td style="color:red;text-align:center;">
										<input type="radio" name="a" v-model.number="periodInfo.is_free" value="0">付费
										<input type="radio" name="a" v-model.number="periodInfo.is_free" value="1">免费
									</td>
									<td>
										<input type="hidden" v-model="periodInfo.doc_url">
										<input type="hidden" v-model="periodInfo.doc_name">
										<input type="hidden" v-model="periodInfo.is_doc">
										<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"  id="uploadfile" v-if="periodInfo.is_doc" style="width:150px;overflow:hidden;">
										<i class="layui-icon">&#xe621;</i>{{periodInfo.doc_name}}
										</button>
										<button type="button" id="uploadfile" class="layui-btn layui-btn-primary layui-btn-sm "  v-else>
										<i class="layui-icon">&#xe621;</i>上传文件
										</button>
									</td>
									<td>
										<input type="hidden" v-model="periodInfo.is_video">
										<input type="text" v-model="periodInfo.video_vid">
									</td>
									<td>
										<button type="button" class="layui-btn layui-btn-my " @click="addPeriod();">
											保存
										</button>
									</td>
								</tr>
							</template>
						  </tbody>
						</table>
					</div>
				</div>
			</div>      
		</div>

		<div class="modal fade" id="videoModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" aria-hidden="true" onclick="closeVideo();">&times;</button>
						<h4 class="modal-title">视频管理</h4>
					</div>
					<div class="modal-body">
						<button type="button" class="layui-btn layui-btn-my" id="liveVideo">
						  <i class="layui-icon">&#xe67c;</i>上传视频
						</button>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"  onclick="closeVideo();">关闭</button>
						<button type="button" class="btn btn-primary" >保存</button>
					</div>
				</div>
			</div>
		</div>


		</div>
	<!-- end -->
	</div>
</div>

<script type="text/javascript">
// 上传视频
layui.upload.render({
	elem: '#liveVideo' //绑定元素
	,url: '{:url("index/qiniu/video")}' //上传接口
	,accept:'video'
	,field:"video"
	,done: function(res){
	  //上传完毕回调
	  console.log(res);
	}
	,error: function(){
	  //请求异常回调
	}
});
var el=new Vue({
	el:'#app1',
	data:{
		courseId:0,
		chapterId:0,
		chapter_name:'',
		periodInfo:{
		  'sort':0,
		  'course_id':0,
		  'chapter_id':0,
		  'period_name':'',
		  'is_free':0,
		  'is_video':0,
		  'video_vid':'',
		  'is_doc':0,
		  'doc_name':'22',
		  'doc_url':'',
		},
		periodList:[],
		editFiles:{}
	},
	methods:{
		// 获取章节列表
		async getPeriodList(id){
			let {data}=await this.$http.get('course/periodList/'+id);
			// console.log(data)
			if(data.code==200){
				var a={}
				a.course_id=this.courseId;
				a.chapter_id=this.chapterId;
				a.sort=data.data.length+1;
				a.period_name='';
				a.is_free=0;
				a.is_video=0;
				a.video_vid='';
				a.is_doc=0;
				a.doc_name='';
				a.doc_url='';
				// this.periodInfo= Object.assign({},a);
				// 解决数据双向绑定问题
				this.periodInfo=a;
				data.data.push({});
				this.periodList=data.data;
			}else{
				this.periodList=[{}];
			}
			this.upload();
		},
		// 添加章节
		async addPeriod(){
			let {data}=await this.$http.post('course/period/'+this.chapterId,this.periodInfo);
			if(data.code==200){
				layer.msg('添加成功');
				this.getPeriodList(this.chapterId);
			}else{
				layer.msg('添加失败');
			}
		},
		// 编辑章节
		async editPeriod(item){
			let {data} =await this.$http.put('course/period/'+item.id,item);
			if(data.code==200){
				layer.msg('编辑成功');
			}else{
				layer.msg('添加失败');
			}
		},
		 delPeriod(id){
			var that =this;
			layer.confirm('确定删除吗',async function(){
				let {data}= await that.$http.delete('course/period/'+id);
				if(data.code==200){
					layer.msg('删除成功');
					that.getPeriodList(that.chapterId);
				}else{
					layer.msg('添加失败');
				}
			});
		},
		upload(){
			var that=this;
			layui.use('upload', function(){
				var upload = layui.upload;
				//添加课时   上传文件
				var addFiles = upload.render({
					elem: '#uploadfile' //绑定元素
					,url: '/upload/courseware' //上传接口
					,accept:'file'
					,field:'courseware'
					,done: function(res){
					    //上传完毕回调
					    if(res.code==0){
							that.periodInfo.doc_url=res.data.doc_url;
							that.periodInfo.doc_name=res.data.doc_name;
							that.periodInfo.is_doc=1;
					    }else{
					    	layer.msg('格式有误');
					    }
					}
					,error: function(){
					}
				});
			});
		},
	},
	created(){
		var chapterId={$chapterId};
		var courseId={$courseId};
		var chapter_name='{$chapter_name}';
		this.chapterId=chapterId;
		this.courseId=courseId;
		this.chapter_name=chapter_name;
		this.getPeriodList(chapterId);
	},
	updated(){
		element.on('tab(docDemoTabBrief)', function(data){
		});
		// 修改课件
		var that=this;
		var num=$('.editfile' ).length;
		for (let i = 0; i < num; i++) {
			layui.use('upload', function () {
                var upload = layui.upload;
				upload.render({
					elem: '#editfile'+i //绑定元素
					,url: '/upload/courseware' //上传接口
					,accept:'file'
					,field:'courseware'
					,data:{

					}
					,done: function(res){
					    //上传完毕回调
					    if(res.code==0){
							that.periodList[i].doc_url=res.data.doc_url;
							that.periodList[i].doc_name=res.data.doc_name;
							that.periodList[i].is_doc=1;
					    }else{
					    	layer.msg('格式有误');
					    }
					}
					,error: function(){
					}

				});
			});
		}
	}
})

// // 打开视频模态框
// function openVideo(){
// 	$('#videoModal').modal('show');
// }
// // 打开视频模态框
// function closeVideo(){
// 	$('#videoModal').modal('hide');
// }
</script>
